<template>
  <div id="login-view">
    <div class="login-region">
      <p class="merchant-name">伍榴点商家中心</p>
      <div class="login-input">
        <div class="login-type">
          <p v-for="(item, index) in loginType" :key="index" :class="{ activeIndex: index === loginTypeIndex }" @click="loginTypeIndex = index">
            {{ item }}
          </p>
        </div>
        <!-- 账号登录 -->
        <div v-if="loginTypeIndex === 0">
          <div class="input-value">
            <span>手机号</span>
            <el-input placeholder="输入手机号" v-model="employeePhoneNumber"></el-input>
          </div>
          <div class="input-value">
            <span>密码</span>
            <el-input placeholder="输入密码" type="password" v-model="loginPassword"></el-input>
          </div>
        </div>
        <!-- 验证码登录 -->
        <div v-if="loginTypeIndex === 1">
          <div class="input-value">
            <span>手机号</span>
            <el-input placeholder="输入手机号" v-model="employeePhoneNumber"></el-input>
          </div>
          <div class="input-value">
            <span>验证码</span>
            <el-input placeholder="输入验证码" v-model="codeval"></el-input>
            <el-button link class="code-style" @click="sendCode" :disabled="codeDisabled">{{ codeName }}</el-button>
          </div>
        </div>
        <!-- 手机号，密码登录按钮 -->
        <el-button v-if="loginTypeIndex === 0" id="new-button" class="login-buton" size="large" @click="phoneLogin" :loading="phoneLoading"
          >登录</el-button
        >
        <!-- 验证码登录按钮 -->
        <el-button v-if="loginTypeIndex === 1" id="new-button" class="login-buton" size="large" :loading="codeLoading" @click="codeLogin"
          >登录</el-button
        >
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { ElMessage } from "element-plus";
import { phoneCheck, passwordCheck, nullCheck } from "@/api/form-check";
import { captchaApi, loginApi, sendCodeApi, codeLoginApi } from "@/api/api";
import { useRouter } from "vue-router";
const $router = useRouter();
const loginType = ref(["账号登录", "验证码登录"]);
const loginTypeIndex = ref(0);
// 存储手机号
const employeePhoneNumber = ref("");
// 存储密码
const loginPassword = ref("");
// 手机号和密码登录之前先调用滑动验证
function phoneLogin() {
  phoneCheck(employeePhoneNumber.value);
  passwordCheck(loginPassword.value);
  slideVerification();
}
// 发送验证码之前先调用滑动验证
function sendCode() {
  phoneCheck(employeePhoneNumber.value);
  slideVerification();
}
// 验证码相关
const codeName = ref("发送验证码");
const codeDisabled = ref(false);
// 倒计时时间
const countdownTime = ref(60);
// 存储验证码
const codeval = ref("");
// 调起滑动验证
function slideVerification() {
  try {
    var captcha = new TencentCaptcha("192537024", callback, {});
    // 调用方法，显示验证码
    captcha.show();
  } catch (error) {
    ElMessage({ message: "验证出现错误", duration: 1500 });
  }
}
// 滑动验证回调函数
async function callback(res: { randstr: string; ret: number; ticket: string }) {
  console.log(res);
  if (res.ret === 0) {
    // 请求服务器端滑动验证
    await captchaApi({ ticket: res.ticket, userIp: "127.0.0.1", randstr: res.randstr });
    if (loginTypeIndex.value === 0) {
      // 验证通过，手机号和密码登录
      phoneLoginApi();
    } else {
      // 验证码倒计时开始
      codeDisabled.value = true;
      var timer = setInterval(() => {
        if (countdownTime.value > 1) {
          countdownTime.value--;
          codeName.value = `${countdownTime.value}秒后重新获取`;
        } else {
          clearInterval(timer);
          codeDisabled.value = false;
          countdownTime.value = 60;
          codeName.value = "发送验证码";
        }
      }, 1000);
      // 请求服务器端发送验证码
      await sendCodeApi({ employeePhoneNumber: employeePhoneNumber.value });
    }
  }
}
// 手机号和密码登录，服务器端验证
const phoneLoading = ref(false);
async function phoneLoginApi() {
  phoneLoading.value = true;
  try {
    const res = await loginApi({ employeePhoneNumber: employeePhoneNumber.value, loginPassword: loginPassword.value });
    localStorage.setItem("userInfo", JSON.stringify(res.data));
    $router.push("/index");
    phoneLoading.value = false;
  } catch (error) {
    phoneLoading.value = false;
  }
}
// 手机号和验证码登录，服务器端验证
const codeLoading = ref(false);
async function codeLogin() {
  phoneCheck(employeePhoneNumber.value);
  nullCheck(codeval.value, "请输入验证码");
  codeLoading.value = true;
  try {
    const res = await codeLoginApi({ employeePhoneNumber: employeePhoneNumber.value, codeval: codeval.value });
    localStorage.setItem("userInfo", JSON.stringify(res.data));
    $router.push("/index");
    codeLoading.value = false;
  } catch (error) {
    codeLoading.value = false;
  }
}
</script>

<style scoped>
#login-view {
  background-image: url("@/assets/loginbk.png");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  min-height: 100vh;
}
.login-region {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.merchant-name {
  text-align: center;
  font-size: 40px;
  padding-bottom: 20px;
  color: #447cd1ff;
}
.login-input {
  background-color: #fff;
  width: 400px;
  padding: 25px;
  border-radius: 10px;
}
.login-type {
  display: flex;
  justify-content: space-around;
}
.login-type p {
  cursor: pointer;
  padding-bottom: 6px;
}
.activeIndex {
  border-bottom: chartreuse solid 3px;
}
.input-value {
  display: flex;
  align-items: center;
  padding: 15px 0;
  border-bottom: 1px solid #eee;
}
.input-value span {
  width: 60px;
}
.input-value .el-input {
  flex: 1;
}
.input-value >>> .el-input__wrapper {
  box-shadow: none;
  background: none;
}
.input-value .el-text {
  width: auto !important;
  cursor: pointer;
}
.code-style {
  color: #1788f8;
  background: none;
  border: none;
}
.code-style >>> span {
  font-size: 14px !important;
}
.login-buton {
  width: 100%;
  margin-top: 20px;
}
</style>
